<template>
	<div class="cartcontrol">
		<transition 
		name="decrease-classes-transition"
		enter-active-class="animated rotateInDownRight"
		leave-active-class="animated rollOut">
		<div class="decrease" v-show="food.count>0" @click="decreaseCart">
			<i class="icon-remove_circle_outline"></i>
		</div>
		</transition>
		<transition
		name="count-classes-transition"
		enter-active-class="animated rotateInDownRight"
		leave-active-class="animated rollOut">
		<div class="num"v-show="food.count>0">{{food.count}}</div>
		</transition>
		<div class="add" @click="addCart">
			<i class="icon-add_circle"></i>
		</div>
		
	</div>
</template>

<script>
	import Vue from 'vue'
	export default{
		name:'cartcontrol',
		props:{
			food:{
				type:Object
			}
		},
		methods:{
			addCart(){
				//console.log(1)
				//定义个计算商品个数的属性
				if(!this.food.count){
					Vue.set(this.food,'count',1)
				}else{
					this.food.count++
				}
				
			},
			decreaseCart(){
				if(this.food.count>0){
					this.food.count--
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.cartcontrol{
		z-index: 10;
		.decrease,.add{
			vertical-align: middle;
			display: inline-block;
			font-size: 24px;
			line-height: 24px;
			padding: 6px;
			color: rgb(0,160,220);
		}
		.num{
			vertical-align: middle;
			display: inline-block;
			width: 12px;
			font-size: 10px;
			line-height: 24px;
			text-align:center;
			font-weight: 200;
		}
	}
</style>
